<template>
  <div>
    <div id="list2" class="list2" style="width: 630px; height: 433px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      echart: null,
    };
  },
  mounted() {
    this.initEchart(); // 首屏渲染
  },
  methods: {
    initEchart() {
      this.$nextTick(() => {
        this.echart = echarts.init(document.getElementById("list2"));
        this.echart.setOption(this.option());
      });
    },
    option() {
      let option = {
        title: {
          text: "近 7 日门诊充值趋势",
          subtext: "单位 (元)",
        },
        xAxis: {
          type: "category",
          data: [
            "11月11日",
            "11月12日",
            "11月13日",
            "11月14日",
            "11月15日",
            "11月16日",
            "11月17日",
          ],
        },
        yAxis: {
          type: "value",
        },
        // 设置折线线条颜色
        lineStyle: {
          color: "orange",
          width: 6, //折线宽度
        },
        series: [
          {
            data: [20600, 21000, 59600, 21000, 78000, 30000, 21000],
            name: "Search Engine",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            smooth: true, //设置折线为圆滑曲线,false则有转折点
            // symbol: "none",   //默认显示折点，为none时不显示
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
        ],
      };

      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
  .list2 {
    display: block;
    margin: 10px;
    padding: 30px 0 0 30px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px 5px #ddd;
  }
</style>